<template>
  <div class="wrap">
    <div class="list" v-for=" (item,index) in data">
      <h3>{{item.code_name}}</h3>
      <div>
        <h5 :class="color(item.rise_price)">
          {{item.last_price}}
          <img :src="img(item.rise_price)" alt="">
        </h5>
        <p :class="color(item.rise_price)">
        		<span>{{item.rise_price | toDe1}}</span>
        		<span>{{item.rise_pre | toDe2}}</span>
        </p>
        
      </div>
    </div>
  </div>
</template>


<script>
	import home from '@/api/home/index'
	import { toast} from '@/util/index'
export default{
	data(){
		return{
			 data:"",
			 clearTime:""
		}
	},
	filters:{
		toDe2(num){
			if(num>0){
				return "+"+num+"%";
				
			}else{
				return num+"%";
			}
		},
		toDe1(num){
			if(num>0){
				return "+"+num;
				
			}else{
				return num;
			}
		},
		
		
	},
	methods:{
		color(value) {
        if(value.substring(0,1)!='-'){
        	return "red";
        } 
   },
   img(value) {
        if(value.substring(0,1)=='-'){
        	return require('../assets/fall.png');
        }else{
        	return require('../assets/rise.png');
        }
   },
   init(){
   		let senddata={
  			plat:"mlj"
  		}
  		home.realTimeJson(senddata).then((data) => {
				if (data.data.code == 200) {
					//console.log(data.data.data)
					this.data=data.data.data;
				}else if(data.data.code==222){
            this.$router.push({path:'/login'})
        } else {
					/*toast(data.data.message)*/
				}
			})
   },
   setTime() {
        this.clearTime=setInterval(() => { 
            this.init();
        }, 1000)
		},
	},
	mounted(){
  		this.setTime();
  },
  destroyed () {
	 
	  clearInterval(this.clearTime);
	}
	
}



</script>
<style lang='less' scoped>
@import '../less/config.less';
.wrap{
    height:2.6667rem;
    width: 100%;
    background-color: @liBg;
    padding-left:@p30;
    margin-bottom:0.26667rem;
     color:@fcolor;
     font-size: 0.32rem;
     display: flex;
     align-items: center;
     h3{
     }
    .list{
      display:inline-block;
      width: 33.33333%;
      line-height: 1.4;
      margin-left: .3rem;
      div{
        color: #33ffc3;
        line-height: 1.6;
        h5{
          font-size: 0.45333rem;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          img{
            width: 0.21333rem;
            height: 0.26667rem;
          }
        }
        p{
        	 span{
		          padding-right: 0.2rem;
		          text-overflow: ellipsis;
		          overflow: hidden;
		          white-space: nowrap;
		        }
        }
        .red{
        	color: #ff335b;
        }
       
      }
    }
    .right{
      padding-left: 0.6rem;
    }
    .minddle{
      padding-left: 0.4rem;
      div{
        color:#ff335b;
      }
    }
}
</style>
